<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>登录</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
			}

			.div {
				background-image: url(img/bg.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				height: 100%;

			}

			.bor1 {
				border: none;
				border-bottom: 1px solid grey;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}

			.bor1:focus {
				border: 2px solid #0066FF;
			}

			.bor2:focus {
				border: 2px solid #0066FF;
			}

			.bor2 {
				border: none;
				border-top: 1px grey solid;
				border-top-left-radius: 0;
				border-top-right-radius: 0;
			}

			.bor {
				/* border: 2px solid grey; */
				border-radius: 5px;
			}

			/* .div1 {
				display: flex;
				justify-content: center;
				align-items: center;
			} */

			.div2 {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -70%);
				background-color: rgba(255, 255, 255, 0.7);
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<div class="container">
				<div class="row">
					<div class="div1">
						<div class="col-md-4 col-sm-4 col-xs-4 div2">
							<h2 class="text-center">欢迎使用宿舍管理系统</h2>
							<form>
								<div class="form-group bor">
									<input type="text" class="form-control bor1" required name="account" placeholder="账号">
									<input type="password" class="form-control bor2" required name="password" placeholder="密码">
								</div>
								<div class="form-group text-center">
									<label class="radio-inline">
										<input type="radio" name="type" value="0" checked> 系统管理员
									</label>
									<label class="radio-inline">
										<input type="radio" name="type" value="1"> 宿舍管理员
									</label>
									<label class="radio-inline">
										<input type="radio" name="type" value="2"> 学生
									</label>
								</div>
								<div class="checkbox text-center">
									<label>
										<input type="checkbox"> 记住密码
									</label>
								</div>
								<div class="form-group">
									<button type="button" id="btn_login" class="btn btn-primary btn-block">登录</button>
								</div>
								<div class="form-group">
									<button type="button" style="width: 49%;" class="btn-default btn">注册</button>
									<button type="button" style="width: 49%;" class="btn-default btn">重置</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>


		<script>
			//角色选择
			let type = 0;

			let types = document.querySelectorAll("input[name='type']");
			types.forEach(item => {
				item.onchange = function () {
					if (item.checked) {
						type = item.value;
					}
					console.log(type);
				}
			});

			let btn_login = document.getElementById("btn_login");
			btn_login.onclick = function () {
				//this表示：btn_login
				console.log(this);
				console.log(type);
				let form = this.form;
				// form.submit();//不能触发required必填验证
				let account = form["account"].value;
				console.log(account);
				let lengthReg = /\w{6,20}/;
				// let emialReg = /^\w+(\.\w+)*@(\w(-[\da-z])?)+(\.{1.txt,2}[a-z]+)+$/;
				if (!lengthReg.test(account)) {
					console.log("账号必须是大小写字母、数字或下划线，且长度为6~20");
					return;
				}

				let menus = [];
				if (type == 0) {
					location.href = "admin.html";
					menus.push({title: "首页", href: "admin.html"});
					menus.push({title: "宿舍管理员管理", href: "dormAdminManager.html"});
					menus.push({title: "学生管理", href: "stuManagement.html"});
					menus.push({title: "宿舍楼管理", href: "dormManagement.html"});
					menus.push({title: "缺勤记录", href: "absence.html"});
					menus.push({title: "修改密码", href: "modifyPassword.html"});
				} else if (type == 1) {
					location.href = "admin.html";
					menus.push({title: "首页", href: "admin.html"});
					menus.push({title: "学生管理", href: "stuManagement.html"});
					menus.push({title: "缺勤记录", href: "absence.html"});
					menus.push({title: "修改密码", href: "modifyPassword.html"});
				} else if (type == 2) {
					location.href = "admin.html";
					menus.push({title: "首页", href: "admin.html"});
					menus.push({title: "缺勤记录", href: "absence.html"});
					menus.push({title: "修改密码", href: "modifyPassword.html"});
				}
				sessionStorage.setItem("menus", JSON.stringify(menus));
				sessionStorage.setItem("type", type);
			}

		</script>


	</body>
</html>
